<template>
  <div class="full-screen-div">
    <HeaderComponent @goBack="goBack" title="申请类型" />
    <div v-if="passDatas!=null" class="container">
      <div v-for="(item, index) in passDatas" :key="index">
        <Tag :passData="item" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted,ref } from 'vue';
import HeaderComponent from '../../component/Header.vue'; // 确保路径正确
import Tag from '../../component/Tag.vue'; // 确保路径正确
import { getAllTypes } from '../../api/application.js'; // 确保路径正确

let iconSrc = "src/assets/applicationIcon/ze-star.png"; // 确保路径正确
const types= ref([]);
const passDatas = ref([])

import router from "../../router/index.js"; // 确保路径正确
const goBack = () => {
  router.push('/application'); // 返回申请记录列表页
};

onMounted(async() => {
  const res = await getAllTypes();
  if(res.flag){
    console.log(res.result);
    types.value = res.result;
    types.value.forEach((item) => {
      passDatas.value.push({
        iconSrc: iconSrc,
        applicationName: item.flowType,
        applicationPath: {name: 'apply', params: {id: item.id, type: item.flowType}},
      });
    });
  }
});
</script>

<style>
.full-screen-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #E1EFFF;
  display: flex;
  flex-direction: column;
}
.container {
  flex-grow: 1;
  /* 使容器填充剩余空间 */
  margin-top: 10px;
  /* 在 header 和 container 之间留出一些空间 */
  padding: 10px;
  /* 内边距，使内容不贴边 */
  /* background-color: white; */
  /* 背景颜色 */
  overflow-y: auto;
  /* 如果内容过多，允许滚动 */
}
</style>